<template>
	<u--image @click="onClick" :showMenuByLongpress="showMenuByLongpress" :showLoading="showLoading" :lazyLoad="lazyLoad" :shape="shape" :fade="fade" :mode="mode" :src="src" :width="realWidth" :height="realHeight" :radius="radius"></u--image>
</template>

<script>
	export default {
		name: 'SimpleImage',
		props: {
			src: {
				type: String,
				required: true
			},
			// 图片宽高
			width: {
				type: [String, Number],
				default: ''
			},
			height: {
				type: [String, Number],
				default: ''
			},
			size: {
				type: [String, Number],
				default: ''
			},
			
			mode: {
				type: String,
				default: 'aspectFill'
			},
			shape: {
				type: String,
				default: 'square'
			},
			lazyLoad: {
				type: Boolean,
				default: false
			},
			fade: {
				type: Boolean,
				default: false
			},
			showMenuByLongpress: {
				type: Boolean,
				default: false
			},
			showLoading: {
				type: Boolean,
				default: true
			},
			radius: {
				type: [String, Number],
				default: ''
			}
		},
		computed: {
			realWidth(){
				if (this.size) {
					const [w, h] = this.size.split(' ')
					if (w) {
						return w
					}
					return '24rpx'
				}
				return this.width
			},
			realHeight(){
				if (this.size) {
					const [w, h] = this.size.split(' ')
					if (h) {
						return h
					}
					return w
				}
				return this.height
			}
		},
		data(){
			return {}
		},
		created() {
		},
		methods: {
			onClick(){
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>